// 轮播图
//获取各个元素
// 获取整个轮播盒子
let oMSlideshow = document.getElementById("main-slideshow");
//获取左右切换按钮
let oPrev = document.getElementById("slideshow-prev");
let oNext = document.getElementById("slideshow-next");
// 获取轮播ul
let oList = document.getElementById("main-slideshow-list");
//获取每个子项
let aList = oList.getElementsByTagName("li");
//获取圆点的父元素
let oSwList = document.getElementById("slideshow-switchover");
//获取每个圆点
let aSwList = oSwList.getElementsByTagName("a");

//声明全局变量用于切换
let n = 0;

// 切换轮播图方法
function switchover(){
	//让所有轮播项隐藏
	for(let i = 0; i < aList.length; i++){
		aList[i].style.display = "none";
	}
	// 序号为n的出现
	aList[n].style.display = "block";
	//圆点切换
	//所有圆点背景变成#999
	for(let i = 0; i < aSwList.length; i++){
		aSwList[i].style.background = "#999";
	}
	//序号为n的变亮
	aSwList[n].style.background = "#fff";
}

//切换下一张图片，点击则让n+1，并触发切换函数
oNext.onclick = function(){
	//让n加一
	n+=1;
	//n的重置器 到4则重置为0
	n = n >= 4? 0 : n;
	//触发切换函数
	switchover()
}
//切换上一张图片，点击则让n-1，并触发切换函数
oPrev.onclick = function(){
	//让n加一
	n-=1;
	//n的重置器 小于0则重置为3
	n = n < 0? 3 : n;
	switchover()
}
// 事件批量添加
for(let i = 0; i < aSwList.length; i++){
	aSwList[i].onmouseover = function(){
		n = i;
		switchover();
	}
}
// 定时器的添加
let timer = setInterval(function(){
	//让n加一
	n+=1;
	//n的重置器 到4则重置为0
	n = n >= 4? 0 : n;
	//触发切换函数
	switchover()
},2000);
// 移入这个轮播图任何地方清除定时器,移出则添加
oMSlideshow.addEventListener('mouseenter', function() {
    clearInterval(timer);
    console.log("清除了");
});
oMSlideshow.addEventListener('mouseleave', function() {
				timer = setInterval(function() {
        // 让 n 加一
        n += 1;
        // n 的重置器，到 4 则重置为 0
        n = n >= 4 ? 0 : n;
        // 触发切换函数
        switchover();
    }, 2000);
    console.log("添加了");
});